iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
2

今晚,我想來點...

收表單就和跑外送一樣,外送員要知道自己要怎麼送以及要送到哪。
如同 U 家外送員可以選騎機車或是開車送外送,表單可以選擇用 Post 或 Get。
怎麼越來越像工商文了(・ω´・ )

關於 Get

如果有玩過 Day 2 的範例,應該會發現在表單的送出按下去之後,網址列好像吃壞肚子一樣怪怪的 Σ(゚ω゚)

其實仔細看網址,從?後面的都是表單裡填的東西,實際上因為沒有設定過要用哪種方法傳送,預設會使用 Get 送出。

科普一下,網址列中%來%去的東西叫做URL編碼,網路上有很多轉換工具可以把他轉回原本的內容哦٩(。・ω・。)و

如果真的要使用 Get 這個方法傳送,寫法如下

<form method="get"> 
</form>

只要在 form 的標籤加上 method="get" 就可以 Get 傳送表單。
來分析一下 Get 的戰鬥力吧 (`・ω・´)

  1. Get 使用起來很方便,就算不使用表單,把網址內容寫好也可以。

這樣說可能不容易理解,來顆栗子吧。我是說例子:

老師要史蒂夫和戴夫去看 IT 邦幫忙第377頁的某篇技術文章,但是選擇頁面的地方長這樣

史蒂夫每次都先按三個...前的那個數字,戴夫則是發現 IT 邦幫忙的網址好像有點搞頭。

這時,戴夫選擇把 page=8 的地方改成 page=377 並按下Enter。

馬上就到377頁了。
史蒂夫還在努力的往後找377頁,戴夫在看貓咪影片。

先說,這真的不是工商

Get 的好用之處在於,它傳值到下一個網頁極為方便,不一定侷限在戴夫,工程師在開發網頁也可以用這樣的技巧傳送一些不是很重要的值

看看,連 Google 也在用哦 d(`・∀・)b

再回到 Day 2 表單送出後的網址看看

這裡的意思應該也很清楚了,就是帳號跟密碼像沒穿衣服一樣被看光光啦。(๑´ㅂ`๑)
所以,要來介紹另一個好朋友

關於 Post

要使用 Post 這個方法傳送,寫法如下

<form method="post"> 
</form>

如果用這個方法送出,表單中的所有參數都會包在送出的封包中,不會以"明顯的"明文方式送出。
這裡留個伏筆,等等會解釋為什麼強調"明顯的"。(っ・Д・)っ

關於表單要送去哪

最後,表單要送到哪裡呢?
我們可以在 form 中加入一個屬性上去


<form action="送到這裡"> 
</form>

一般來說,action後面的值會是一個後端的檔案,由這個後端檔案處理送過去的表單。

番外篇_好像很安全的 Post 方法

我大學時的教育,某個教網路通訊的老師說:網路上沒有祕密這件事情,只要上到網路就是公開的。只差公開的內容是看得懂的還是看不懂的。

我們嘗試一下,使用 Post 送出這些資料。

送出後的結果

可以看到,雖然在網址列看不到資料的內容了,但是用壞壞工具 > Network> test.html > Headers > Form Datas可以看到剛剛打的六個黑點變成123456了。Σ( ° △ °)

這不打緊,畢竟自己看到自己的密碼沒什麼。你聽過安麗嗎?(`・ω・´)

你聽過中間人攻擊嗎?

中間人攻擊的是像下面這張圖

一般使用者會認為自己是以 A 路線與伺服器連線,事實上存在著以 B 路線與伺服器連線的風險。
這樣的風險容易存在於免費的 Wifi。如果某個免費的 Wifi 是以駭客的電腦當作熱點,所有封包都會經過駭客的電腦再送往網際網路。如果駭客會側錄所有網路介面接收或送出的封包,剛剛 Post 的內容也會被記錄在駭客的電腦中囉。

中間人攻擊不只免費的 Wifi 這種方法可以做到,不過因為不在網頁的範疇,我就不多說了。總之

天下沒有免費的雞腿便當
免費的永遠是最貴的哦ξ( ✿>◡❛)

充滿工商陷阱的一篇文啊


上一篇
Day 2 _ 關於 HTML 標籤語言 - 2
下一篇
Day 4 _ 關於表單
系列文
大學 50 萬貸款的交代30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言